<template>
  <div class="app-container">
    <div style="position:absolute;top:0px;left:0px;height:100%;width:100%;" v-loading="loading" >
      <!--地图-->
      <CqgdataMap
          :allRadioIndexData="allRadioIndexData"
          :allListData="allListData"
          :typeCodeDataList="typeCodeDataList"
          :resetClearAllBool="resetClearAllBool"
          @getDetailDataById="getDetailDataById"
      ></CqgdataMap>
    </div>
    <div id="cqgdataMap-mapDiv" class="ol-popup">
      <div class="select">
        <div class="selectData"><span>选择数据</span><el-icon style="cursor:pointer;" :size="23" @click="hideTabBoxDiv"><Expand /></el-icon></div>
        <el-button type="primary" @click="handleAdd">添加数据</el-button>
      </div>
      <!--选择数据收起div-->
      <div class="box-hide-div" v-if="boxshow==false">
        <span class="box-hide-div-label-span">当前选择：</span>
        <span class="box-hide-div-text-span" v-if="queryParams.dataRangeText!='' || queryParams.dataLayerText!=''">
          {{ queryParams.dataRangeText }}，{{ queryParams.dataLayerText }}
        </span>
      </div>
      <!--选择数据展开div-->
      <div class="box" :class="versionCodeDivShow?'box-max':'box-min'" v-if="boxshow==true">
        <!--选择数据内容div-->
        <div style="position:absolute;top:0px;left:0px;bottom:40px;width:400px;">
          <!--tab标签页-->
          <div class="tab-div">
            <div class="tab-button" :class="activeName=='版本范围'?'tab-active':'tab-no'" @click="showDataRangeTab">
              版本范围
            </div>
            <div class="tab-button" :class="activeName=='数据图层'?'tab-active':'tab-no'" @click="showDataLayerTab">
              数据图层
            </div>
          </div>
          <!--tab内容div-->
          <div class="tab-content-all-div">
            <!--版本范围tab内容-->
            <div v-if="activeName=='版本范围'" class="tab-content">
              <span class="tab-span" @click="hideTabBoxDiv">收起</span>
              <div style="position:absolute;top:40px;left:20px;right:20px;bottom:0px;">
                <el-radio-group v-model="queryParams.dataRangeCountry" @change="changeRadio" style="margin-bottom: 20px;">
                  <el-radio label="1">国家级数据</el-radio>
                  <el-radio label="2">省级数据</el-radio>
                </el-radio-group>
                <el-form :model="queryParams" ref="queryRef" label-width="50px" :rules="rules">
                  <el-row>
                    <el-col>
                      <el-form-item label="省" prop="dataRangeProvince">
                        <el-select v-model="queryParams.dataRangeProvince" placeholder="请选择" @change="chooseProvince" clearable>
                          <el-option key="全国" label="全国" value="全国" v-if="queryParams.dataRangeCountry == '1'"></el-option>
                          <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="市" prop="dataRangeCity">
                        <el-select v-model="queryParams.dataRangeCity" placeholder="请选择" @change="chooseCity" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国'">
                          <el-option key="全部" label="全部" value="全部" v-if="cityData&&cityData.length>0"></el-option>
                          <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col>
                      <el-form-item label="区/县" prop="dataRangeArea">
                        <el-select v-model="queryParams.dataRangeArea" placeholder="请选择" @change="chooseArea" clearable
                                   :disabled="queryParams.dataRangeProvince=='全国' || queryParams.dataRangeCity=='全部'">
                          <el-option key="全部" label="全部" value="全部" v-if="areaData&&areaData.length>0"></el-option>
                          <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div style="float: right;margin-right: 50px;">
                  <el-button type="primary" @click="submitSelect">确定</el-button>
                  <el-button @click="resetSelect">重置</el-button>
                </div>
              </div>
            </div>
            <!--数据图层tab内容-->
            <div v-if="activeName=='数据图层'" class="tab-content">
              <!--版本范围当前选择div-->
              <div style="width:100%;height:80px;background:rgb(230 242 253);overflow: hidden;">
                <span class="tab-span" @click="showDataRangeTab">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataRangeText }}
                </span>
              </div>
              <!--数据图层当前选择div（展开）-->
              <div v-if="collapseData.showHideBool==true" class="tab-layercollapse-allShow">
                <div class="tab-layercollapse-allShow-head">
                  <span class="tab-span" @click="hideCollapseDiv">收起</span>
                  <span class="tab-span" @click="resetCollapseDiv" >重置</span>
                </div>
                <!--数据图层类型选择div-->
                <div class="tab-layercollapse-div">
                  <el-radio-group v-model="activeRadioLabel" @change="radioChange" style="display: block;">
                    <el-collapse v-model="activeNames" @change="handleChange">
                      <el-collapse-item v-for="item in collapseLayerData" :title="item.label" :name="item.value" class="tab-layercollapse-header">
                        <div v-for="child in item.children" class="tab-collapse-radioDiv">
                          <el-radio :label="child.radioLabel">{{child.name}}</el-radio>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </el-radio-group>
                </div>
              </div>
              <!--数据图层当前选择div（收起）-->
              <div v-if="collapseData.showHideBool==false" class="tab-layercollapse-allHide">
                <span class="tab-span" @click="collapseData.showHideBool=true">展开</span>
                <span class="tab-layercollapse-allHide-label-span">当前选择：</span><br/>
                <span class="tab-layercollapse-allHide-text-span">
                  {{ queryParams.dataLayerText }}
                </span>
              </div>
              <!--重置div-->
              <div v-if="collapseData.showHideBool==false">
                <span style="float: right;margin:10px;color: #107ce5;cursor: pointer;font-size: 14px;" @click="resetAllCollapseDiv" >重置</span>
              </div>
            </div>
          </div>
        </div>
        <!--底部收起按钮div-->
        <div class="foot-div" @click="hideTabBoxDiv">
          <svg-icon style="width:100%;height:100%;" class-name="arrow_drop_up-icon" icon-class="arrow_drop_up" />
        </div>
        <!--选择数据版本号div-->
        <div class="tab-select-versionCode-div" v-if="versionCodeDivShow">
          <el-input v-model="queryParams.dataTypeCodeSearchText" @change="querySysDataVersion" size="large" placeholder="请输入版本号" prefix-icon="Search"/>
          <p style="height:20px;color:black;font-weight: bold;">{{collapseData.layerName}}</p>
          <div style="position: absolute;top: 60px;right: 10px;height: 32px;width: 175px;">
            <el-button type="primary" @click="openDetail">元数据管理</el-button>
            <el-button type="primary" @click="handleDelete">删除</el-button>
          </div>
          <div class="tab-table-div">
            <el-table :data="versionCodeTableData" ref="versionCodeTable" @row-click="clickRow"
                      @select="handleSelectionChange" stripe style="width: 100%">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="versionCode" label="版本号" width="190" />
              <el-table-column prop="uploadTime" label="上传时间" width="120" />
              <el-table-column align="right" width="50">
                <template #header></template>
                <template #default="scope">
                  <!--版本信息-->
                  <el-popover placement="right" :width="210" trigger="hover">
                    <template #reference>
                      <div style="height: 20px;">
                        <svg-icon style="width:100%;height:100%;" class-name="three_point_new-icon" icon-class="three_point_new" />
                      </div>
                    </template>
                    <template #default>
                      <p style="height: 20px;line-height: 20px;margin: 0px;font-weight: bold;">版本信息</p>
                      <el-divider style="margin:10px 0;" />
                      <p style="font-weight: bold;">版本说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.versionDesc }}</p>
                      <p style="font-weight: bold;">数据说明：</p>
                      <p style="max-height: 200px;overflow: auto;">{{ scope.row.dataDesc }}</p>
                      <p><span style="font-weight: bold;">上传人：</span>{{scope.row.createUser}}</p>
                    </template>
                  </el-popover>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- 元数据信息 -->
      <el-dialog v-model="openData" width="800px" title="元数据信息" append-to-body :show-close="!isFirstOpen"
                 :close-on-click-modal="!isFirstOpen" :close-on-press-escape="!isFirstOpen">
        <el-form ref="ruleFormData" :model="formData" :rules="rules" label-width="120px">
          <p class="mt15"></p>
          <el-form-item label="上传人">{{ formData.uploadUser }}</el-form-item>
          <el-form-item label="上传日期">{{ formData.uploadTime }}</el-form-item>
          <el-form-item label="数据来源" prop="uploadSource">
            <el-input v-model="formData.uploadSource" placeholder="请输入数据来源" clearable :disabled="!isFirstOpen" />
          </el-form-item>
          <el-form-item label="数据类别" prop="type">{{ formData.dataType }}</el-form-item>
          <el-form-item label="数据范围" prop="dataScope" required>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item prop="dataRangeCountry" label-width="0px">
                  <el-select v-model="formData.dataRangeCountry" placeholder="请选择" style="width:100%" disabled>
                    <el-option v-for="item in [{ value: 1, label: '国家级' }, { value: 2, label: '省级' }]" :key="item.value"
                               :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item prop="dataRangeProvince" label-width="0px">
                  <el-select v-model="formData.dataRangeProvince" placeholder="省" style="width:100%" disabled>
                    <el-option v-for="item in provinceFormData1" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-select v-model="formData.dataRangeCity" placeholder="市" style="width:100%" disabled>
                  <el-option v-for="item in cityFormData1" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select v-model="formData.dataRangeArea" placeholder="区县" style="width:100%" disabled>
                  <el-option v-for="item in areaFormData1" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="是否空间数据" prop="isSpatialData" required>
            <el-radio-group v-model="formData.isSpatialData" disabled>
              <el-radio :label="1">空间数据</el-radio>
              <el-radio :label="0">非空间数据</el-radio>
            </el-radio-group>
          </el-form-item>

          <template v-if="formData.isSpatialData == '1'">
            <el-form-item label="空间数据类型" prop="spatialDataType">
              <el-radio-group v-model="formData.spatialDataType">
                <el-radio :label="1">点</el-radio>
                <el-radio :label="2">线</el-radio>
                <el-radio :label="3">面</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="tab-title">基于坐标的空间参照系</div>
            <el-form-item label="坐标系类型">{{ formData.coordinateSystemType }}</el-form-item>
            <el-form-item label="坐标系名称">{{ formData.coordinateSystemName }}</el-form-item>
            <el-form-item label="英文缩写">{{ formData.coordinateSystemEnName }}</el-form-item>
            <el-form-item label="投影信息" prop="projectionInfo">
              <el-input v-model="formData.projectionInfo" placeholder="请输入投影信息" clearable />
            </el-form-item>
          </template>
          <div class="tab-title">数据字段</div>
          <el-form-item label="字段个数" prop="fieldNum">
            <el-input v-model="formData.fieldNum" placeholder="请输入字段个数" clearable />
          </el-form-item>
          <el-form-item label="数据记录条数" prop="fieldEntry">
            <el-input v-model="formData.fieldEntry" placeholder="请输入数据记录条数" clearable />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitFormYuan">保存</el-button>
            <el-button v-if="!isFirstOpen" @click="openData = false">取消</el-button>
          </div>
        </template>
      </el-dialog>
      <!--根据版本查询图层数据信息表格-->
      <!--储气罐数据信息表格-->
      <CqgdataTable v-if="resetClearAllBool==false && allTableDataBool==true"
          :allTableDataBool="allTableDataBool"
          :isSpatialDataBool="isSpatialDataBool"
          :currentLayerName="currentLayerName"
          :currentLayerCode="currentLayerCode"
          :allTableDataList="allTableDataList"
      ></CqgdataTable>
      <!-- 添加数据 -->
      <CqgAddData
          :addDataType="currentLayerCode"
          :openAddDataBool="addDataShowDivBool"
          @closeAddData="closeAddData"
      ></CqgAddData>
    </div>
  </div>
</template>

<script setup name="cqgdata">
//地图
import CqgdataMap from '@/map/security/cqgdata/map.vue';
import CqgdataTable from '@/views/security/cqgdata/table.vue';
import CqgAddData from '@/views/security/cqgdata/addData.vue';
import { getProvince, getChildArea } from "@/api/system/division";
import { getSysDataVersion, queryDataByVersionCode,queryDataById } from "@/api/security/cqgdata.js";
import { updateAdministrativeArea, getDetail,delAdministrativeArea } from '@/api/security/administrativeArea';
import { ElMessageBox } from 'element-plus'

const { proxy } = getCurrentInstance();
const loading = ref(false);
const activeName = ref("版本范围");
const activeNames = ref("1");//数据图层类型选择div默认展开的序号
const activeRadioLabel = ref(null);//激活显示版本号选择div的图层radio序号
const boxshow = ref(false);//是否显示选择数据div
const versionCodeDivShow = ref(false);//是否显示选择版本号div
const resetClearAllBool = ref(false);//是否重置清空全部图层数组
const versionCodeTableData = ref([]);//查询版本号数据列表
const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]); //区、县
const dataRangeProvinceCheck = (rule, value, callback) => {
  if (!value) {
    //if (!value && queryParams.value.dataRangeCountry == "2") {
    callback(new Error('请选择省'))
  } else if (value == undefined && queryParams.value.dataRangeCountry == undefined) {
    callback()
  } else {
    callback()
  }
}

const columns1 = ref([
  { prop: 'jbCode',label: '行政代码' },
  { prop: 'sjName',label: '名称' },
]);
const columns = ref([
  { prop: 'jfCode',label: '断层编号' },
  { prop: 'scale',label: '工作底图比例尺（分母）' },
  { prop: 'fractureZoneName',label: '断裂带名称' },
  { prop: 'dcName',label: '断层名称' },
  { prop: 'faultSegmentName',label: '断层段名称' },
  { prop: 'strikeDrection',label: '走向 [16方位]' },
  { prop: 'strike',label: '断层走向 [度]' },
  { prop: 'direction',label: '倾向 [16方位]' },
  { prop: 'clination',label: '倾角 [度]' },
  { prop: 'jfLength',label: '长度' },
  { prop: 'topDepth',label: '上断点埋深 [米]' },
  { prop: 'width',label: '破碎带宽度 [米]' },
  { prop: 'fractureBeltWidth',label: '变形带宽度 [米]' },
  { prop: 'feature',label: '断层性质' },
  { prop: 'latestActivePeriod',label: '最新活动时代' },
  { prop: 'startTimeEst',label: '位移与平均速率起算时间' },
  { prop: 'vdisplaceEst',label: '垂直位移 [米]' },
  { prop: 'vdisplaceEr',label: '垂直位移误差' },
  { prop: 'hdisplaceEst',label: '走向水平位移 [米]' },
  { prop: 'hdisplaceEr',label: '走向水平位移误差' },
  { prop: 'tdisplaceEst',label: '水平//张缩位移 [米]' },
  { prop: 'tdisplaceEr',label: '水平张缩位移误差' },
  { prop: 'aveVrate',label: '平均垂直速率 [毫米/年]' },
  { prop: 'aveVrateEr',label: '平均垂直速率误差' },
  { prop: 'aveHrate',label: '平均水平速率 [毫米/年]' },
  { prop: 'aveHrateRr',label: '平均水平速率误差' },
  { prop: 'startTimeNewest',label: '最新速率起算时间' },
  { prop: 'newVrate',label: '最新垂直速率 [毫米/年]' },
  { prop: 'newVrateer',label: '最新垂直速率误差' },
  { prop: 'newHrate',label: '最新水平速率 [毫米/年]' },
  { prop: 'newHrateEr',label: '最新水平速率误差' },
  { prop: 'maxVrate',label: '最大垂直速率 [米]' },
  { prop: 'maxVrateEr',label: '最大垂直速率误差' },
  { prop: 'maxHrate',label: '最大水平速率 [毫米/年]' },
  { prop: 'maxHrateRr',label: '最大水平速率误差' },
  { prop: 'eqEventCount',label: '古地震事件次数' },
  { prop: 'eqEventRibottom',label: '古地震复发间隔' },
  { prop: 'eqEventRitop',label: '古地震复发间隔上限' },
  { prop: 'method',label: '确定手段' },
  { prop: 'maxRuptureLen',label: '最大破裂长度' },
  { prop: 'avgRuptureLen',label: '平均破裂长度' },
  { prop: 'elapseTimeLatesteq',label: '最晚地震离逝时间' },
  { prop: 'slipDepthEst',label: '错动深度' },
  { prop: 'slipDepthEr',label: '错动深度误差' },
  { prop: 'avgSlipRateest',label: '平均滑动速率 [毫米/年]' },
  { prop: 'avgSlipRateer',label: '平均滑动速率误差' },
  { prop: 'creepRateest',label: '蠕动速率 [毫米/年]' },
  { prop: 'creepRateer',label: '蠕动速率误差' },
  { prop: 'csmaxSlipest',label: '最大同震位移 [米]' },
  { prop: 'csMaxSliper',label: '最大同震位移误差' },
  { prop: 'csAveSlipest',label: '平均同震位移 [米]' },
  { prop: 'csAveSliper',label: '平均同震位移误差' },
  { prop: 'latestCsSlipest',label: '最新地震平均位移' },
  { prop: 'latestCsSliper',label: '最新地震平均位移误差' },
  { prop: 'nsb1',label: '断层符号基础位' },
  { prop: 'nsb2',label: '断层符号下标位' },
  { prop: 'nsb3',label: '断层符号上标位' },
  { prop: 'showCode',label: '断层显示码' },
  { prop: 'activeFault',label: '活断层探测研究状况' },
  { prop: 'status',label: '隐伏/出露' },
  { prop: 'activePeriod',label: '活动时代' },
  { prop: 'commentInfo',label: '备注' },
]);

// 表头部重新渲染
const renderHeader = (h, { column, $index }) => {
  // 新建一个 span
  let span = document.createElement('span');
  // 设置表头名称
  span.innerText = column.label;
  // 临时插入 document
  document.body.appendChild(span);
  // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
  column.minWidth = span.getBoundingClientRect().width + 20;
  // 移除 document 中临时的 span
  document.body.removeChild(span);
  return h('span', column.label);
}

const data = reactive({
  queryParams: {
    dataTypeCode: '',
    dataRangeCountry: '1',
    dataRangeProvince: '全国',
    dataRangeCity: '',
    dataRangeArea:'',
    dataRangeText:'',//版本范围当前选择内容
    dataLayerText:'',//数据图层当前选择内容
    dataTypeCodeSearchText:'',//搜索版本号输入框文本
  },
  queryParamsNew: {
    dataRangeProvince: '',//省ID
    dataRangeCity: '',//市ID
    dataRangeArea:'',//区县ID
  },
  form: {
    banben: '保存新版本',
    dataScope: '1',
    type: '1',
    dataFileId: [],
    versionCode: '',
  },
  formData: {
    dataScope: '1',
    type: '1',
  },
  rules: {
    dataRangeCountry: [{ required: true, message: "数据级别不能为空", trigger: "change" }],
    dataRangeProvince: [{ required: true, message: "省不能为空", trigger: "change", validator: dataRangeProvinceCheck }],
    dataType: [{ required: true, message: "数据类别不能为空", trigger: "change" }],
    dataType2: [{ required: true, message: "子数据类别不能为空", trigger: "change" }],
    dataName: [{ required: true, message: "数据名称不能为空", trigger: "blur" }],
    dataDesc: [{ required: true, message: "数据说明不能为空", trigger: "blur" }],
    versionCode: [{ required: true, message: "版本号不能为空", trigger: "change" }],
    versionTime: [{ required: true, message: "版本日期不能为空", trigger: "change" }],
    versionDesc: [{ required: true, message: "版本说明不能为空", trigger: "blur" }],
    updateDesc: [{ required: true, message: "更新说明不能为空", trigger: "blur" }],
    dataFileIds: [{ required: true, message: "数据文件不能为空", trigger: "blur" }],
    dataFrom: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
    uploadSource: [{ required: true, message: "数据来源不能为空", trigger: "blur" }],
    spatialDataType: [{ required: true, message: "空间数据类型不能为空", trigger: "blur" }],
    projectionInfo: [{ required: true, message: "投影信息不能为空", trigger: "blur" }],
    fieldNum: [{ required: true, message: "字段个数不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
    fieldEntry: [{ required: true, message: "数据记录条数不能为空", trigger: "blur" }, { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数！', trigger: 'change' }],
  },
  rulesNew:{
    dataRangeProvince: [{ required: true, message: "省不能为空", trigger: "change", validator: dataRangeProvinceCheck }],
  },
  collapseData:{
    showHideBool:true,
    layerName:'',//选中图层名称
  },
  typeCodeInfo:{
    //typeInfo:'针对本版本说明文字，限制300字以内',//版本说明
    typeInfo:'针对本版本说明文字，限制300字以内,针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，',
    //dataInfo:'针对本数据说明文字，限制300字以内',//数据说明
    dataInfo:'针对数据说明文字，限制300字以内,针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，限制300字以内针对本版本说明文字，',
    uploadUser:'张三',//上传人
  }
})
const { queryParams, queryParamsNew, form, rules, rulesNew, formData,collapseData,typeCodeInfo } = toRefs(data);

//数据图层显示列表
const collapseLayerData = ref([]);
/*const collapseLayerData = ref([
  {
    value:"0",
    label: '行政区划数据',
    children: [{
      name: '省级行政区',
      radioLabel: 'sjxzq',
      spaceBool:true,//是否空间数据
    }, {
      name: '市级行政区',
      radioLabel: 'djxzq',
      spaceBool:true,//是否空间数据
    }, {
      name: '县级行政区',
      radioLabel: 'xjxzq',
      spaceBool:true,//是否空间数据
    }, {
      name: '乡级行政区',
      radioLabel: 'xjxzq1',
      spaceBool:true,//是否空间数据
    }]
  },
]);*/

//选择图层的版本号数据列表
const typeCodeDataList = ref([]);
/*const typeCodeDataList = ref([
  {
    name: '省级行政区',
    radioLabel: 'sjxzq',
    typeCodeSelectData:[],
  }, {
    name: '市级行政区',
    radioLabel: 'djxzq',
    typeCodeSelectData:[],
  }, {
    name: '县级行政区',
    radioLabel: 'xjxzq',
    typeCodeSelectData:[],
  }, {
    name: '乡级行政区',
    radioLabel: 'xjxzq1',
    typeCodeSelectData:[],
  },
]);*/

// 改变版本范围
const changeRadio = (value)=>{
  if(value=="1"){//国家级
    queryParams.value.dataRangeProvince = "全国";
  }else{
    queryParams.value.dataRangeProvince = "";
  }
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeProvince = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
}

const showDataRangeTab = (value)=>{
  activeName.value = '版本范围';
  //收起数据图层
  hideCollapseDiv();
}

const showDataLayerTab = (value)=>{
  if(queryParams.value.dataRangeText==""){
    proxy.$modal.msgWarning("请先设置版本范围");
  }else{
    activeName.value = '数据图层';
  }
}

//确定版本范围
const submitSelect = (value)=>{
  proxy.$refs["queryRef"].validate(valid => {
    if (valid) {
      //重置数据图层
      resetCollapseDiv();
      collapseData.value.showHideBool=true;//展开数据图层
      let country = queryParams.value.dataRangeCountry;
      if(country=="1"){
        country = "国家级数据";
      }else{
        country = "省级数据";
      }
      let province = isUndefined(queryParams.value.dataRangeProvince);
      let city = isUndefined(queryParams.value.dataRangeCity);
      let area = isUndefined(queryParams.value.dataRangeArea);
      queryParams.value.dataRangeText = country+"，"+province+city+area;
      activeName.value = '数据图层';
    }
  });
}

//判断是否无值则返回空字符串，“全部”返回空字符串
function isUndefined(value){
  if(value==undefined || value==null || value=='全部'){
    value = "";
  }
  return value;
}

//重置版本范围
const resetSelect = ()=>{
  proxy.resetForm("queryRef");
  queryParams.value.dataRangeProvince = "";
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParams.value.dataRangeText = "";
  queryParamsNew.value.dataRangeProvince = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
  //版本范围当前选择内容
  let country = queryParams.value.dataRangeCountry;
  if(country=="1"){
    country = "国家级数据";
    queryParams.value.dataRangeProvince = "全国";//默认全国
  }else{
    country = "省级数据";
  }
  queryParams.value.dataRangeText = country;
}

/** 获取省列表 */
function getProvinceData() {
  getProvince().then(response => {
    provinceData.value = response.data;
  });
}
//选择省
function chooseProvince(value) {
  queryParams.value.dataRangeCity = "";
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeCity = "";
  queryParamsNew.value.dataRangeArea = "";
  cityData.value = [];
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeProvince = "";
  }else{
    if(value=="全国"){
      queryParams.value.dataRangeProvince = value;
      queryParamsNew.value.dataRangeProvince = "";
    }else{
      queryParamsNew.value.dataRangeProvince = value.id;
      queryParams.value.dataRangeProvince = value.name;
      getChildArea(value.id).then(response => {
        cityData.value = response.data;
      });
    }
  }
}
//选择市
function chooseCity(value) {
  queryParams.value.dataRangeArea = "";
  queryParamsNew.value.dataRangeArea = "";
  areaData.value = [];
  if(value==""){
    queryParamsNew.value.dataRangeCity = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeCity = value;
      queryParamsNew.value.dataRangeCity = "";
    }else{
      queryParamsNew.value.dataRangeCity = value.id;
      queryParams.value.dataRangeCity = value.name;
      getChildArea(value.id).then((response) => {
        areaData.value = response.data;
      });
    }
  }
}
//选择区县
function chooseArea(value){
  if(value==""){
    queryParamsNew.value.dataRangeArea = "";
  }else{
    if(value=="全部"){
      queryParams.value.dataRangeArea = value;
      queryParamsNew.value.dataRangeArea = "";
    }else{
      queryParamsNew.value.dataRangeArea = value.id;
      queryParams.value.dataRangeArea = value.name;
    }
  }
}

const handleChange = (val) => {
  console.log(val)
}

//收起选择数据div
const hideTabBoxDiv = () => {
  if(boxshow.value){
    //收起数据图层
    hideCollapseDiv();
    boxshow.value = false;
  }else{
    boxshow.value = true;
  }
}

//收起数据图层
const hideCollapseDiv = () => {
  //获取数据图层当前选择内容
  getDataLayerText();
  collapseData.value.showHideBool=false;
  versionCodeDivShow.value = false;
  activeRadioLabel.value = null;
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
}

//重置数据图层
const resetCollapseDiv = () => {
  //清空图层选择的版本号列表
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++) {
    datalist[i].typeCodeSelectData = [];
  }
  activeRadioLabel.value = null;
  versionCodeDivShow.value = false;
  queryParams.value.dataLayerText = "";
  resetClearAllBool.value = true;//是否重置清空全部图层数组
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
}

//重置数据图层和版本范围
const resetAllCollapseDiv = () => {
  //重置数据图层
  resetCollapseDiv();
  //重置版本范围
  //resetSelect();
  activeName.value = '版本范围';
}

//根据序号值获取版本数据
const getLayerInfoByRadioIndex = (radioLabel) => {
  let data = null;
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++){
    if(datalist[i].radioLabel==radioLabel){
      data = datalist[i];
      break;
    }
  }

  return data;
}

//图层选择绑定值变化时触发的事件
const radioChange = () => {
  console.log("图层选择");
  //隐藏选择版本号div
  versionCodeDivShow.value = false;
  queryParams.value.dataTypeCodeSearchText = "";//清空搜索内容
  versionCodeTableData.value = [];//清空表数据
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    //获取图层名称
    collapseData.value.layerName = data.name;
  }
  selectdatas.value = [];//清空勾选数据
  //查询版本列表
  querySysDataVersion();
}

//设置勾选的表数据
const changeState = () => {
  console.log("设置勾选的表数据");
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    console.log(data.typeCodeSelectData);
    //设置勾选的表数据
    selectdatas.value = data.typeCodeSelectData;
  }
  if(proxy.$refs.versionCodeTable){
    let tableData = versionCodeTableData.value;
    let selectDataArray = selectdatas.value;
    for (let i = 0; i < tableData.length; i++) {
      if (selectDataArray.indexOf(tableData[i]["versionCode"]) != -1) {//勾选
        proxy.$refs.versionCodeTable.toggleRowSelection(
            tableData[i],
            true
        );
      }else{//不勾选
        proxy.$refs.versionCodeTable.toggleRowSelection(
            tableData[i],
            false
        );
      }
    }
  }
}

//显示隐藏折叠面板
const showHideCollapse = (value) => {
  if(document.getElementById(value).style.display == "none"){
    document.getElementById(value).style.display = "block";
  }else{
    document.getElementById(value).style.display = "none";
  }
}

const currentRow = ref(null);//当前选择的行数据
/** 单击选择行 */
function clickRow(row) {
  proxy.$refs.versionCodeTable.toggleRowSelection(row);
  //设置图层选择的版本号列表
  setActiveTypeCodeList(row);
}
const selectdatas = ref([]);//勾选的数据
/** 多选框选中数据 */
function handleSelectionChange(selecteds, row) {
  //设置图层选择的版本号列表
  setActiveTypeCodeList(row);
}

//设置图层选择的版本号列表（添加、移除）并查询图层数据
function setActiveTypeCodeList(row){
  let bool = false;//是否添加版本号
  //添加、移除版本号
  if (!selectdatas.value.includes(row.versionCode)) {
    selectdatas.value.push(row.versionCode);//添加
    bool = true;
    currentRow.value = row;//当前选择的行数据
  } else {
    selectdatas.value.forEach((id, index) => {
      if (id === row.versionCode) {
        selectdatas.value.splice(index, 1);//移除
      }
    });
    bool = false;
    currentRow.value = null;//清空当前选择的行数据
  }
  console.log(selectdatas.value);
  console.log("设置图层选择的版本号列表");
  console.log(row);
  let radioLabel = activeRadioLabel.value;
  //根据序号值获取版本数据
  let data = getLayerInfoByRadioIndex(radioLabel);
  if(data!=null){
    //设置图层对应的选择版本号列表
    data.typeCodeSelectData = selectdatas.value;
    //是否为空间数据
    isSpatialDataBool.value = data.spaceBool;
    resetClearAllBool.value = false;//是否重置清空全部图层数组
    if(data.spaceBool){//空间数据
      if(bool){//添加版本号
        //根据图层类型查询图层版本号数据
        //查询版本号对应图层数据
        getDataByVersionCode(row,true);
        /*
          let resultList = getTestDataList();
          allListData.value = [radioLabel,row.versionCode,resultList,true];
        */
      }else{//移除版本号s
        allListData.value = [radioLabel,row.versionCode,[],false];
        allTableDataBool.value = false;
        allTableDataList.value = [];//清空图层表格数据列表
      }
    }else{//非空间数据
      if(bool) {//添加版本号
        //查询版本号对应非空间数据
        getDataByVersionCode(row,false);
      }else{
        allTableDataBool.value = false;
        allTableDataList.value = [];//清空图层表格数据列表
      }
    }
  }
}

//测试数据
function getTestDataList(){
  let testList = [];
  for(let i=0;i<100;i++){
    let lon = Math.random()*100 +10;
    let lat = Math.random()*30 +10;
    let geomText = 'POINT('+lon+' '+ lat +')';
    let testData = {
      id:i,
      geomText:geomText
    }
    testList.push(testData);
  }

  return testList;
}

//获取数据图层当前选择内容
function getDataLayerText(){
  let text = "";
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++){
    let radioLabel = datalist[i].radioLabel;
    let selectArray = datalist[i].typeCodeSelectData;
    if(selectArray.length>0){
      //根据序号获取图层全名数组
      let fullNameArr = getLayerFullNameArr(radioLabel);
      if(fullNameArr.length==2){
        text += fullNameArr[0] + "/" + fullNameArr[1] + "，";
      }else{
        continue;
      }
      for(let j=0;j<selectArray.length;j++){
        let versionCode = selectArray[j];
        if(j>0){
          text += "，";
        }
        text += "版本号"+versionCode;
      }
      text += "；";
    }
  }
  queryParams.value.dataLayerText = text;
}

//根据序号获取图层全名数组
function getLayerFullNameArr(radioLabel){
  let fullNameArr = [];
  let list = collapseLayerData.value;
  for(let i=0;i<list.length;i++){
    let childList = list[i].children;
    for(let j=0;j<childList.length;j++){
      if(childList[j].radioLabel==radioLabel){
        let parentName = list[i].label;
        let layerName = childList[j].name;
        fullNameArr = [parentName,layerName];
        break;
      }
    }
  }

  return fullNameArr;
}

const alertSelect = () => {
  ElMessageBox.alert('请选择要展示的数据及版本', '系统提示', {
    confirmButtonText: '确定',
    callback: () => {
      boxshow.value = true;
    },
  })
}

//添加数据
const addDataShowDivBool = ref(false);
//打开添加数据面板
const handleAdd = ()=>{
  addDataShowDivBool.value = true;
}
//关闭添加数据面板
const closeAddData = ()=>{
  addDataShowDivBool.value = false;
}

//获取数据图层显示列表
const getAllTreeData = ()=>{
  /*//查询数据图层分类树
  getDataTypeLevel2AndDataTypeLevel3Tree(queryParams.value).then((response) => {
    nextTick(() => {
      console.log("查询数据图层分类树");
      console.log(response.data);
      let list = response.data;
      let collapseLayerDataArray = [];
      let typeCodeDataArray = [];
      let allRadioIndexArray = [];
      if(list!=null && list.length>0){
        for(let i=0;i<list.length;i++){
          let data = list[i];
          let childrenData = [];
          let children = data.children;
          for(let j=0;j<children.length;j++){
            let bool = false;
            if(children[j].isSpatialData==1){//空间数据
              bool = true;
            }
            childrenData.push({
              name: children[j].dictItemName,
              radioLabel: children[j].dictItemId,
              spaceBool:bool,//是否空间数据
              dictItemCode: children[j].dictItemCode,
            });
            //选择图层的版本号数据列表
            typeCodeDataArray.push({
              name: children[j].dictItemName,
              radioLabel: children[j].dictItemId,
              typeCodeSelectData:[],
              dictItemCode: children[j].dictItemCode,
              spaceBool:bool,//是否空间数据
            });
            //全部序号列表
            allRadioIndexArray.push(children[j].dictItemId);
          }
          let collapseData = {
            value:data.dictItemId,
            label: data.dictItemName,
            children: childrenData,
            dictItemCode: data.dictItemCode,
          }
          collapseLayerDataArray.push(collapseData);
        }
      }
      //数据图层显示列表
      collapseLayerData.value = collapseLayerDataArray;

      //选择图层的版本号数据列表
      typeCodeDataList.value = typeCodeDataArray;

      //全部序号列表
      allRadioIndexData.value = allRadioIndexArray;
    });
  });*/

  console.log("查询数据图层分类树");
  let collapseLayerDataArray = [];
  let typeCodeDataArray = [];
  let allRadioIndexArray = [];

  let childrenData = [];
  let children = {
    dictItemName:"储气罐数据",
    dictItemId:"1",
    dictItemCode:"1",
  };

  childrenData.push({
    name: children.dictItemName,
    radioLabel: children.dictItemId,
    spaceBool:true,//是否空间数据
    dictItemCode: children.dictItemCode,
  });
  //选择图层的版本号数据列表
  typeCodeDataArray.push({
    name: children.dictItemName,
    radioLabel: children.dictItemId,
    typeCodeSelectData:[],
    dictItemCode: children.dictItemCode,
    spaceBool:true,//是否空间数据
  });
  //全部序号列表
  allRadioIndexArray.push(children.dictItemId);

  let collapseData = {
    value:children.dictItemId,
    label: children.dictItemName,
    children: childrenData,
    dictItemCode: children.dictItemCode,
  }
  collapseLayerDataArray.push(collapseData);

  //数据图层显示列表
  collapseLayerData.value = collapseLayerDataArray;

  //选择图层的版本号数据列表
  typeCodeDataList.value = typeCodeDataArray;

  //全部序号列表
  allRadioIndexData.value = allRadioIndexArray;
}

//查询版本列表
const querySysDataVersion = ()=>{
  currentRow.value = null;//清空当前选择的行数据
  let params = {
    dataRangeCountry : queryParams.value.dataRangeCountry,//1-国家级， 2-省级
    dataRangeProvince : queryParamsNew.value.dataRangeProvince,//省份id
    dataRangeCity : queryParamsNew.value.dataRangeCity,//市id
    dataRangeArea : queryParamsNew.value.dataRangeArea,//区县id
    dataTypeCode : activeRadioLabel.value,//三级数据类别（数据表）id
    versionCode : queryParams.value.dataTypeCodeSearchText,//版本号
  }
  console.log("点击查询版本列表");
  console.log(params);
  //查询版本列表
  getSysDataVersion(params).then((response) => {
    nextTick(() => {
      console.log("查询版本列表");
      console.log(response.data);
      //显示选择版本号div
      versionCodeDivShow.value = true;
      //测试数据
      versionCodeTableData.value = response.data;
      nextTick(() => {
        //设置勾选的表数据
        changeState();
      });
    });
  });
}

//是否显示图层表格数据列表
const allTableDataBool = ref(false);
//图层表格数据列表
const allTableDataList = ref([]);
//是否为空间数据
const isSpatialDataBool = ref(false);
//查询版本号对应图层数据
const getDataByVersionCode = (row,spatialBool)=>{
  console.log("开始查询版本号对应图层数据");
  console.log(row);
  let typeCode = currentLayerCode.value;
  let versionCode = row.versionCode;
  let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
  }
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空图层表格数据列表
  loading.value = true;
  //查询版本号对应图层数据
  queryDataByVersionCode(params).then((response) => {
    nextTick(() => {
      console.log("查询版本号对应图层数据结果");
      console.log(response.data);
      let resultList = response.data;
      if(resultList!=null){
        allTableDataList.value = resultList;//图层表格数据列表
      }
      allTableDataBool.value = true;
      let radioLabel = activeRadioLabel.value;
      if(spatialBool){//空间数据
        allListData.value = [radioLabel,row.versionCode,resultList,true];//显示图层数据列表
      }
      loading.value = false;
    });
  }).catch(err => {
    loading.value = false;
  });
}

//当前数据类型图层名称
const currentLayerName = ref("储气罐");
//当前数据类型code
const currentLayerCode = ref("1");//1是储气罐  2是重点场所
//根据ID查询数据属性表
const getDetailDataById = (temp)=>{
  console.log("开始根据ID查询数据属性表");
  let id = temp.id;
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空根据ID查询数据属性表
  //根据ID查询数据属性表
  queryDataById(id).then((response) => {
    nextTick(() => {
      console.log("根据ID查询数据属性表");
      console.log(response.data);
      if(response.data!=null){
        allTableDataList.value = [response.data];
      }
      allTableDataBool.value = true;
    });
  });
}

//根据三级数据类别（数据表）code获取数据图层名称
const getDictItemNameByCode = (typeCode) => {
  let dictItemName = "";
  let list = typeCodeDataList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].dictItemCode==typeCode){
      dictItemName = list[i].name;
      break;
    }
  }

  return dictItemName;
}

//元数据管理
function openDetail() {
  isFirstOpen.value = false;
  let versionCode = null;
  if(currentRow.value!=null){
    versionCode = currentRow.value.versionCode;
  }
  if(versionCode==null){
    proxy.$modal.msgWarning("请先勾选一条数据！");
    return;
  }
  handleDetail(versionCode);
}

// 数据详情
function handleDetail(versionCode) {
  const typeCode = '1';
  getDetail(versionCode,typeCode).then(res => {
    formData.value = {
      dataScope: '1',
      type: '1',
      ...res.data,
    };
    editProvinceFormData(formData.value.dataRangeProvince, formData.value.dataRangeCity)
  })
}

const openData = ref(false);
const isFirstOpen = ref(true);
const provinceFormData1 = ref([]);//省
const cityFormData1 = ref([]);//市
const areaFormData1 = ref([]); //区、县

function editProvinceFormData(provinceId, cityId) {
  if (!provinceId && !cityId) {
    cityFormData1.value = [];
    areaFormData1.value = [];
  }
  if (provinceId && !cityId) {
    getChildArea(provinceId).then(response => {
      cityFormData1.value = response.data;
      areaFormData1.value = [];
    });
  }
  if (provinceId && cityId) {
    getChildArea(provinceId).then(response => {
      cityFormData1.value = response.data;
    });
    getChildArea(cityId).then(response => {
      areaFormData1.value = response.data;
    });
  }
  openData.value = true;
  proxy.resetForm("ruleFormData");
}

// 编辑元数据
function submitFormYuan() {
  proxy.$refs["ruleFormData"].validate(valid => {
    if (valid) {
      updateAdministrativeArea({ ...formData.value }).then(res => {
        //图层选择绑定值变化时触发的事件
        radioChange();
        proxy.$modal.msgSuccess("保存成功");
        openData.value = false;
      })
    }
  });
}

/** 删除按钮操作 */
function handleDelete() {
  let id = null;
  if(currentRow.value!=null){
    id = currentRow.value.id;
  }
  if(id==null){
    proxy.$modal.msgWarning("请先勾选一条数据！");
    return;
  }
  proxy.$modal.confirm("是否确认删除此版本数据？", 'Warning',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(function () {
    return delAdministrativeArea(id);
  }).then(() => {
    //图层选择绑定值变化时触发的事件
    radioChange();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

/*地图传参start*/
const allListData = ref([]);//地图显示数据列表
const allRadioIndexData = ref([]);//全部序号列表
/*地图传参end*/

getAllTreeData();
getProvinceData();
alertSelect();
</script>

<style scoped lang="scss">
.select{
  position:absolute;
  top:29px;
  left:29px;
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .selectData{
    color: darkolivegreen;
    width: 150px;
    height: 40px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
    /*border:1px solid #707070;*/
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 4px;
  }
}

.box {
  position:absolute;
  top:70px;
  left:29px;
  width: 400px;
  bottom:17px;
  background-color: #fff;
  transition: height 0.3s ease;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}

.box-max {
  width: 820px;
}

.box-min {
  width: 400px;
}

.box-hide-div {
  position:absolute;
  top:80px;
  left:29px;
  width:370px;
  height:130px;
  color:#fff;
  background: #000;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
  border:1px solid #707070;
  border-radius: 4px;
  opacity: 0.5;
}

.box-hide-div-label-span {
  position: absolute;top:10px;left:15px;font-weight: bold;font-size: 16px;
}

.box-hide-div-text-span {
  position: absolute;
  top: 40px;
  left: 15px;
  font-size: 14px;
  height: 80px;
  overflow: auto;
  right: 15px;
}

.tab-div {
  position:absolute;top:0px;left:0px;width:110px;height: 100%;border-right: 1px solid #d8dce5;
}
.tab-button {
  position:relative;top:0px;left:0px;width:100%;height:50px;line-height: 50px;text-align: center;
}
.tab-active {
  color:#fff;
  background:#107ce5;
}
.tab-no {
  color:#666;
  background:#fff;
}

.tab-content-all-div {
  position:absolute;top:0px;left:110px;width:290px;height: 100%;
}

.tab-content {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

.tab-span {
  float: right;margin:10px;color: #107ce5;cursor: pointer;font-size: 14px;
}

.tab-layercollapse-allShow {
  position: absolute;top: 80px;width:100%;bottom:0px;
}

.tab-layercollapse-allShow-head {
  width:100%;height:40px;background:#fff;
}

.tab-layercollapse-allHide {
  width:100%;background:rgb(230 242 253);min-height: 80px;max-height:200px;border-top: 1px solid #d8dce5;overflow:auto;
}

.tab-layercollapse-allHide-label-span{
  position: relative;top:10px;left:20px;font-weight: bold;font-size: 16px;
}
.tab-layercollapse-allHide-text-span {
  position: relative;margin-top: 20px;left:20px;font-size: 14px;width: 250px;display: block;
}

.tab-layercollapse-div{
  position: absolute;top: 40px;width:100%;bottom:0px;overflow:auto;
}

.foot-div {
  position:absolute;left:0px;bottom:0px;width:400px;height:40px;border-top:1px solid #d8dce5;cursor: pointer;
}

.tab-select-versionCode-div {
  position: absolute;top:0px;left:400px;width:420px;bottom:0px;background:#fff;
  border-left:1px solid #d8dce5;padding:10px;
}

.tab-collapse-radioDiv{
  padding-left:20px;
}

.tab-table-div {
  position:absolute;top:102px;left:0px;width:100%;bottom: 0px;overflow: auto;
}

.tab-title {
  font-size: 16px;
  font-weight: bold;
  border-left: 4px solid #0D9AFF;
  font-family: PingFangSC-Medium;
  padding-left: 10px;
  margin-bottom: 20px;
}

:deep(.el-collapse-item__header) {
  background-color: rgb(230 242 253) !important;
  padding-left: 10px;
  font-size: 14px;
  color: #475767;
}

:deep(.el-collapse-item__content) {
  padding-top: 20px;
  padding-bottom: 20px;
}

// 深度选择器 去掉表头全选按钮
:deep(.el-table__header-wrapper .el-checkbox) {
  display: none;
}

</style>